<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件管理</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <script src="/static/js/vue/vue.min.js"></script><!--vue.js-->
    <script src="/static/js/page.min.js"></script><!--分页组件-->
</head>
<style>
    .tabItem{
        display: inline-block;
        width: 289px;
        height: 318px;
        margin: 15px 10px;
    }
    .tabItem .card-body{
        text-align: center;
    }
    .card-img-top{
        width: 100%;
        height: 190px;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">
    <div class="container-fluid">

        <!--表格-->
        <div class="container" style="margin-top: 50px;max-width: 1325px">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <span class="lead">视频列表</span>
                        </div>
                        <div class="card-body">
                            <span id="introduction"><mark></mark></span>
                        </div>
                        <div class="table-responsive">

                            <!--标签页导航-->
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="cyyBtn" data-tid="1" data-toggle="tab" href="#cyy">
                                        <h6>C语言</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="eeBtn" data-tid="2" data-toggle="tab" href="#ee">
                                        <h6>javaEE开发</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="mysqlBtn" data-tid="3" data-toggle="tab" href="#mysql">
                                        <h6>mysql</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="htmlBtn" data-tid="4" data-toggle="tab" href="#html">
                                        <h6>html</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="cssBtn" data-tid="5" data-toggle="tab" href="#css">
                                        <h6>css</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="JavaScriptBtn" data-tid="6" data-toggle="tab" href="#JavaScript">
                                        <h6>JavaScript</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="springmvcBtn" data-tid="7" data-toggle="tab" href="#springmvc">
                                        <h6>springmvc</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="springBtn" data-tid="8" data-toggle="tab" href="#spring">
                                        <h6>spring</h6>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="mybatisBtn" data-tid="9" data-toggle="tab" href="#mybatis">
                                        <h6>mybatis</h6>
                                    </a>
                                </li>
                            </ul>

                            <!--具体内容-->
                            <div class="tab-content border border-top-0" style="min-height: 797px">
                                <!--cyy-->
                                <div class="tab-pane fade show active" id="cyy">
                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item" id="cyyC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="cyyP">

                                                </ul>
                                            </nav>
                                        </div>

                                    </ul>
                                </div>
                                <!--java ee-->
                                <div class="tab-pane fade" id="ee">
                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item" id="eeC">

                                        </li>
                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="eeP">

                                                </ul>
                                            </nav>
                                        </div>

                                    </ul>
                                </div>
                                <!--mysql-->
                                <div class="tab-pane fade" id="mysql">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="mysqlC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="mysqlP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--html-->
                                <div class="tab-pane fade" id="html">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="htmlC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="htmlP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--css-->
                                <div class="tab-pane fade" id="css">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="cssC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="cssP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--JavaScript-->
                                <div class="tab-pane fade" id="JavaScript">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="JavaScriptC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="JavaScriptP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--springmvc-->
                                <div class="tab-pane fade" id="springmvc">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="springmvcC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="springmvcP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--spring-->
                                <div class="tab-pane fade" id="spring">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="springC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="springP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                                <!--mybatis-->
                                <div class="tab-pane fade" id="mybatis">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" id="mybatisC">

                                        </li>

                                        <div class="col-md-12 col-sm-6">
                                            <nav class="nav-fenye">
                                                <ul class="pagination" id="mybatisP" data-tID="2">

                                                </ul>
                                            </nav>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>

<script>
    $(function() {
        let introduction = $("#introduction")
        let nav_link = $(".table-responsive .nav-link")
        /*消息弹窗全局配置*/
        Qmsg.config({
            showClose:true,
            timeout:2000,
            autoClose:true
        })

        /*初始化，默认访问C语言第一页*/
        ajaxGetVideo(1,"cyy");

        nav_link.click(function () {
            let tid = $(this).data("tid");
            //console.log(tid)
            let content = $(this).prop("id").replace("Btn","");
            //console.log(content)
            ajaxGetVideo(tid,content);
        })

        function ajaxGetVideo(tid,e) {
            let element = $('#' + e + 'C');
            let pagination = $('#' + e + 'P')
            $.ajax({
                type:"GET",
                url:"/file/fileList/" + tid,
                success: (data)=> {
                    if (data !== ""){
                        pagination.pagination({
                            pages: data.totalPage, //总页数 data.totalPage
                            edges: 1, //默认访问
                            cssStyle: '', //写入自定义css
                            displayedPages: 5, //显示几个
                            onPageClick: function(pageNumber, event) {
                                //点击时调用
                                console.log(pageNumber);
                                ajaxGetByPage(tid,pageNumber,element)
                            },
                            onInit: function(pageNumber) {
                                //刷新时或初始化调用
                                if (pageNumber === '1'){
                                    introduction.html(`<mark>${data.list[0].category}</mark>` + "目前有"+ data.totalCount + "个视频")
                                    console.log("初始化 =" + data.list[0].category + "= 文件数据")
                                    console.log(data)
                                    setTableInfo(data.list,element)
                                }else{
                                    ajaxGetByPage(tid,pageNumber,element)
                                }
                            }
                        });
                    }else{
                        introduction.text("当前没有文件")
                        Qmsg.warning("当前没有文件",{position:'center'});
                    }
                },
                error:function(){
                    alert("获取数据失败");
                }
            });
        }

        /*ajax通过页码获得文件信息*/
        function ajaxGetByPage(tid,pageNumber,element) {
            $.ajax({
                type:"GET",
                url:"/file/fileList/" + tid + "/" + pageNumber,
                success: (data)=> {
                    setTableInfo(data.list,element)
                },
                error:function(){
                    Qmsg.warning("获取数据失败",{position:'center'});
                }
            });
        }

        //向表格添加信息
        function setTableInfo(list,element){
            element.empty();
            if (list.length !== 0){
                for (const x of list) {
                    element.append(`<div class="card tabItem">
                                    <img src="${x.fileCover}" class="card-img-top" alt="...">
                                    <div class="card-body" style="padding: 0.25em">
                                        <h5 class="card-title" style="margin-bottom: 0">${x.fileName}</h5>
                                        <p class="card-text" style="margin-bottom: 0.5rem">${x.fileNote}</p>
                                        <a href="/file/playVideo/${x.fileID}" class="btn btn-primary" >观看</a>
                                    </div>
                                   </div>`)
                }
            }
        }
    });

</script>

</body>
</html>
